/* ===== Product Hero (same sizing & look as .about-hero-1) ===== */
.product-hero-1 {
  position: relative;
  background: url('prdetailbanner.jpg'); /* <-- apni image path use karein */
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
  height: 40vh;
  z-index: 0;
   display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center for the block */
  flex-direction: column;  /* h1 & p stacked */

}

/* Black overlay (same approach) */
.product-hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6); /* 0.6 = same darkness as about-hero */
  z-index: -1;                 /* keeps overlay behind the text */
}

/* keep text on top (same as about-hero-1) */
.product-hero-1 * {
  position: relative;
  z-index: 1;
}

/* Typography — mirror about-hero-1 */
.product-hero-1 h1{
  font-size: 3rem;            /* matches about-hero-1 */
  margin-bottom: 1rem;
  color: #ffffff;
  animation: fadeInUp 1s ease;
}
.product-hero-1 p{
  font-size: 1.2rem;          /* matches about-hero-1 */
  max-width: 700px;
  margin: 0 auto;
  color: #ffffff;
  animation: fadeInUp 1s ease .2s both;
}

/* Responsive tweaks (optional) */
@media (max-width: 768px){
  .product-hero-1 { padding: 56px 0; }
  .product-hero-1 h1 { font-size: 2.2rem; }
  .product-hero-1 p  { font-size: 1.05rem; }
}
@media (max-width: 480px){
  .product-hero-1 { padding: 48px 0; }
  .product-hero-1 h1 { font-size: 1.9rem; }
  .product-hero-1 p  { font-size: 1rem; }
}

/* Reuse the same animation if not already present */
@keyframes fadeInUp{
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* -----------------------------------section 2---------------------------- */

/* Section heading at start */
/* Center align for the section heading */
.pds2-section-head{
  max-width:1280px;
  margin:0 auto;
  padding:22px 20px 8px;
  text-align:center;              /* ⬅️ center */
  border-bottom:1px solid #e5e7eb;
}

.pds2-section-title{
  margin:0;
  font-size:clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight:900;
  letter-spacing:.3px;
}

.pds2-section-sub{
  margin:6px auto 0;              /* auto left/right to center */
  color:#6b7280;
  font-size:.98rem;
}

/* optional: small accent underline under the title
.pds2-section-title::after{
  content:"";
  display:block;
  width:72px;                     /* adjust if needed */
  /* height:3px;
  margin:10px auto 0;             /* center the bar */
  /* background:#facc15;             /* your accent yellow */
  /* border-radius:999px; */ */ */
/* } */ */


 .product-detail-section-2{border-top:1px solid var(--pds2-border); border-bottom:1px solid var(--pds2-border); background:var(--pds2-bg);}

  /* ====== TOP ROW GALLERY (equal sized) ====== */
  .pds2-row-gallery{
    max-width:1280px; margin:0 auto; padding:18px 20px 8px; display:grid;
    grid-template-columns: repeat(6, 1fr); gap:12px; overflow-x:auto; scrollbar-width:thin;
  }
  .pds2-row-thumb{
    border:1px solid var(--pds2-border); border-radius:14px; background:#fff; padding:0; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; box-shadow:var(--pds2-shadow);
  }
  .pds2-row-thumb.is-active{ border-color:var(--pds2-hover); box-shadow:0 10px 24px rgba(71,51,145,.18); }
  .pds2-row-thumb:hover{ transform:translateY(-2px); }
  .pds2-row-thumb img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:13px; }

  /* Optional large hero under row (keeps equal top row, bada preview niche) */
  .pds2-hero-under{ max-width:1280px; margin:0 auto; padding:0 20px 8px; }
  .pds2-hero-under img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:18px; box-shadow:var(--pds2-shadow); }

  /* ====== STACK BELOW (text + pricing) ====== */
  .pds2-stack{ max-width:1280px; margin:0 auto; padding:12px 20px 26px; display:grid; grid-template-columns: 1.7fr 1.3fr; gap:28px; align-items:start; }
  .pds2-badge{ display:inline-block; background:rgba(250,204,21,.16); color:#7a5b00; border:1px dashed #f59e0b; padding:6px 10px; border-radius:999px; font-weight:800; margin-bottom:10px; font-size:.9rem; }
  .pds2-title{ margin:0 0 8px; font-size:clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.25; color:var(--pds2-text); }
  .pds2-subtitle{ margin:0 0 12px; color:#4b5563; font-size:clamp(1rem, 1.4vw, 1.08rem); }
  .pds2-bullets{ margin:0 0 14px 18px; color:var(--pds2-muted); font-size:1rem; }
  .pds2-bullets li{ margin:8px 0; }
  .pds2-stock{ font-weight:600; color:var(--pds2-success); font-size:1rem; }
  .pds2-stock[data-stock="low"]{color:#f59e0b;} .pds2-stock[data-stock="out"]{color:#ef4444;}

  .pds2-actions{ border:1px solid var(--pds2-border); border-radius:18px; padding:40px; background:#fff; box-shadow:var(--pds2-shadow); position:sticky; top:24px; }
  .pds2-pricewrap{ margin-bottom:14px; }
  .pds2-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .pds2-price-now{ font-size:1.9rem; font-weight:900; color:var(--pds2-text); }
  .pds2-price-mrp{ color:var(--pds2-muted); text-decoration:line-through; font-size:1.05rem; }
  .pds2-price-off{ color:#16a34a; font-weight:800; background:rgba(22,163,74,.08); padding:4px 10px; border-radius:999px; font-size:.95rem; }
  .pds2-emi{ color:var(--pds2-muted); font-size:1rem; }

  .pds2-qty{ display:flex; align-items:center; gap:10px; margin:14px 0; }
  .pds2-qty-box{ display:inline-flex; border:1px solid var(--pds2-border); border-radius:999px; overflow:hidden; background:#fff; }
  .pds2-qty-btn{ width:40px; height:40px; border:0; background:#fff; cursor:pointer; font-size:18px; }
  .pds2-qty-btn:hover{ background:#f9fafb; }
  .pds2-qty-input{ width:58px; border:0; text-align:center; outline:none; font-weight:800; font-size:1rem; }

  .pds2-buttons{ display:flex; gap:12px; margin-top:2px; }
  .pds2-btn{ height:46px; padding:0 18px; border-radius:999px; cursor:pointer; font-weight:900; letter-spacing:.2px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
  .pds2-btn:active{ transform:translateY(1px); }
  .pds2-btn-solid{ background:var(--pds2-accent); border:1px solid var(--pds2-accent); color:#111; }
  .pds2-btn-solid:hover{ background:var(--pds2-hover); border-color:var(--pds2-hover); color:#fff; box-shadow:0 12px 26px rgba(71,51,145,.22); }
  .pds2-btn-outline{ background:#fff; border:1px solid var(--pds2-border); color:#111; }
  .pds2-btn-outline:hover{ border-color:var(--pds2-hover); color:var(--pds2-hover); box-shadow:0 12px 26px rgba(71,51,145,.14); }

  /* Sticky bar (unchanged) */
  .product-detail-section-2-sticky-bar{ position:sticky; bottom:0; left:0; right:0; z-index:40; display:none; background:#111; color:#fff; border-top:1px solid rgba(255,255,255,.12); padding:10px 12px; }
  .pds2sb-left{ display:flex; gap:10px; align-items:center; }
  .product-detail-section-2-sticky-bar img{ width:52px; height:52px; object-fit:cover; border-radius:12px; }
  .pds2sb-title{ font-weight:800; font-size:1rem; }
  .pds2sb-price{ font-weight:900; color:var(--pds2-accent); }
  .pds2sb-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
  .pds2sb-qty{ display:inline-flex; border:1px solid rgba(255,255,255,.2); border-radius:10px; overflow:hidden; }
  .pds2sb-qty-btn{ width:36px; height:36px; background:transparent; color:#fff; border:0; font-size:18px; cursor:pointer; }
  .pds2sb-qty-input{ width:44px; text-align:center; background:transparent; color:#fff; border:0; outline:none; }
  .pds2sb-btn{ height:38px; padding:0 14px; border-radius:10px; border:0; cursor:pointer; font-weight:900; }
  .pds2sb-btn.add{ background:#222; color:#fff; border:1px solid rgba(255,255,255,.25); }
  .pds2sb-btn.buy{ background:var(--pds2-accent); color:#111; }
  .pds2sb-btn.add:hover{ background:#2b2b2b; } .pds2sb-btn.buy:hover{ background:var(--pds2-hover); color:#fff; }

  /* Responsive */
  @media (max-width: 1100px){
    .pds2-stack{ grid-template-columns:1fr; }
  }
  @media (max-width: 820px){
    .pds2-row-gallery{ grid-template-columns: repeat(6, 72vw); gap:10px; } /* one-row horizontal scroll on small */
  }
  @media (max-width: 768px){
    .product-detail-section-2-sticky-bar{ display:flex; padding-bottom:calc(env(safe-area-inset-bottom,0) + 10px); }
    .pds2-hero-under img{ aspect-ratio: 4/3; } /* optional tighter ratio on mobile */
  }


  /* === Smaller hero-under image (only the big preview below the row) === */
.pds2-hero-under {
  padding: 0 20px 8px;      /* same container padding */
}

.pds2-hero-under img {
  display: block;
  margin: 0 auto;           /* center align */
  max-width: 78%;           /* <= shrink width (try 70–85% as you like) */
  max-height: 420px;        /* cap height for balance */
  aspect-ratio: 4 / 3;      /* tighter ratio than 16:9 */
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}






